<template>
  <div>
    <query-grid
      tableName="user"
      sysName="meta"
      downloadUrl="http://www.baidu.com"
      importUrl="/user/save/img"
      :columns="columns"
      rowKey="id"
      :editClick="edit"
      :multiple="true"
      :operating="['query', 'new', 'edit', 'delete', 'download', 'import']"
      :queryOptions="queryOptions"
      :queryForm="queryForm"
      :queryColumns="4"
      :newClick="edit"
    />
    <el-dialog
      title="收货地址"
      append-to-body
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <form-edit
        sysName="meta"
        tableName="user"
        :showToolbar="false"
        :options="options"
        :form="form"
        :rules="rules"
        size="small"
        ref="dialogForm"
      />
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-refresh-left"
          @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-success"
          @click="
            dialogFormVisible = false;
            save();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FormEdit from "@comp/form/FormEdit.vue";
import QueryGrid from "../../components/grid/QueryGrid.vue";
import { form, options, rules, columns } from "@opts/admin/user-manager.js";
import Toolbar from "../../components/base/Toolbar.vue";
export default {
  components: { QueryGrid, FormEdit, Toolbar, FormEdit },
  data() {
    return {
      dialogFormVisible: false,
      user: JSON.parse(window.sessionStorage.getItem("user")),
      tableData: [],
      /**
       * update:1=只读，2=可修改，3=正在修改
       * data、addre:true=分别使用日期和自定义地址组件
       * radio、check、options:Array=分别使用单选、多选、下拉列表
       */
      form: { ...form },
      options,
      rules,
      queryOptions: {
        username: "text",
        name: "text",
        workid: "text",
        description: "cascader",
      },
      queryForm: {
        username: "",
        name: "",
        workid: "",
        description: "",
        // _mock: {
        //   id: "@guid",
        //   name: "@cname",
        //   username: "@word",
        //   password: "@word(6,16)",
        //   workid: "@zip",
        //   sex: "@integer(1,2)",
        //   ethnic: "@integer(1,5)",
        //   idcard: "",
        //   birthday: new Date(),
        //   "description|1": ['150302','150303','150304','150102','150103','150104'],
        //   mobile: "",
        //   phone: "@zip",
        // },
      },
      params: {},
      columns,
    };
  },
  methods: {
    edit(i, row) {
      if (typeof i == "object") {
        //新增按钮点击
        this.form = {};
      } else if (typeof i == "number") {
        //编辑按钮点击
        this.form = row;
      }
      this.dialogFormVisible = true;
    },
    save() {
      this.$refs.dialogForm.submit((result) => {
        console.log(result);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-footer {
  background-color: #ececec;
  padding: 10px 20px 10px 20px;
  border-radius: 0px 0px 5px 5px;
}
</style>
